<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>项目文件</span>
        </div>
      </template>
      <el-input
        style="width: 300px; padding-left: 5px"
        @clear="searchOrder"
        clearable
        v-model="searchForm.name"
        placeholder="请输入项目名称"
        class="input-with-select"
      >
        <template #append>
          <el-button icon="Search" @click="searchOrder" />
        </template>
      </el-input>
      <span style="font-size: 15px; margin-left: 20px"> 选择年份：</span>
      <el-select
        v-model="searchForm.year"
        placeholder="Select"
        style="width: 140px"
        @change="searchOrder"
      >
        <el-option v-for="item in years" :key="item.year" :value="item.year" />
      </el-select>
      <span style="font-size: 16px; margin-left: 20px"> 选择部门：</span>
      <el-select
        v-model="searchForm.department"
        placeholder="Select"
        style="width: 140px"
        @change="searchOrder"
      >
        <el-option
          v-for="item in departments"
          :key="item.name"
          :value="item.name"
        />
      </el-select>

      <el-row>
        <el-col v-for="(file, index) in fileList" :key="index">
          <el-card :body-style="{ padding: '0px' }">
            <div class="content">
              <template v-if="tool.isImage(file.url)">
                <el-image
                  :src="`${baseURL}/${file.url}`"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="
                    file.url.split(',').map((url) => `${baseURL}/${url.trim()}`)
                  "
                  :initial-index="0"
                  fit="cover"
                  @load="onImageLoad"
                />
              </template>
              <template v-else-if="tool.isVideo(file.url)">
                <video
                  controls
                  :src="`${baseURL}/${file.url}`"
                  class="video"
                  @click="showVideoDialog(file)"
                  preload="metadata"
                ></video>
              </template>
              <template v-else>
                <a
                  :href="`${baseURL}/${file.url}`"
                  class="file-download"
                  target="_blank"
                >
               
                  <el-button type="primary" round>
                    点击查看{{ file.url.split('/').pop().split('.').pop() }}文件<el-icon class="el-icon--right"
                      ><View
                    /></el-icon>
                  </el-button>
                </a>
              </template>
            </div>

            <div style="padding: 14px; text-align: left">
              <span class="product-name" :title="file.name">{{ file.name }}</span>
              <div class="bottom">
                <time class="time">{{ file.create_date.split('T')[0] }}</time>
                <span class="author">{{ file.member }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-pagination
        style="margin-top: 20px"
        :current-page="searchForm.current"
        :page-size="searchForm.size"
        :page-sizes="[20, 30, 40]"
        layout="->,total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import fileApi from '../../api/file'
import workApi from '../../api/work'
import tool from '../../tools/tool'
const fileList = ref()
const showImage = ref(false)
const showVideo = ref(false)
const selectedImage = ref()
const selectedVideo = ref()
const imageStyle = ref({ opacity: 0 })
let total = ref()
const years = ref()
const departments = ref()

// 获取全局变量
const baseURL = window.globalConfig.baseURL

// 搜索条件
const searchForm = reactive({
  current: 1,
  size: 20,
  name: '',
  year: '',
  department: '',
})

const getFileList = async () => {
  //请求数据
  const res = await fileApi.getFiles(searchForm)
  console.log(res)
  fileList.value = res.data.rows[0]
  total.value = res.data.totalCount // 设置 total 的值
}

onMounted(async () => {
  const yearRes = await workApi.getDistinctYears()
  years.value = yearRes.data
  years.value.unshift({
    year: '全部',
  })
  console.log(years.value)
  //默认全部
  searchForm.year = years.value[0].year

  const departmentRes = await workApi.getDepartments()
  departments.value = departmentRes.data
  // 在数组前面加入一个新的对象作为“全部”选项
  departments.value.unshift({
    id: 'all', // 或者设定为null，取决于你的需求
    name: '全部', // 这里的键名"id"和"name"根据你实际的数据结构调整
  })

  searchForm.department = departments.value[0].name

  getFileList()
})

const showVideoDialog = (file) => {
  selectedVideo.value = `${baseURL}/${file.url}`
  showVideo.value = true
}

const onImageLoad = (event) => {
  const img = event.target
  const isHorizontal = img.naturalWidth < img.naturalHeight

  // 直接修改图片的样式
  img.style.height = isHorizontal ? '350px' : 'auto'
  img.style.width = isHorizontal ? 'auto' : '100%'
  img.style.opacity = 1
  img.style.verticalAlign = 'middle'
}

const searchOrder = () => {
  searchForm.current = 1
  getFileList()
}

const handleSizeChange = (size) => {
  searchForm.size = size
  getFileList()
}
const handleCurrentChange = (current) => {
  searchForm.current = current
  getFileList()
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
}

.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-row {
  padding: 20px 0;
}

.el-row .el-card {
  text-align: center;
}

.el-col {
  width: 250px;
  height: 400px;
  margin: 5px;
}

.el-card {
  height: 100%;
  text-align: left;
}

.el-col-24 {
  flex: none;
  /* cursor: pointer; */
}

.el-col img {
  padding: 20px;
  opacity: 0;
  transition: all 0.5s;
}

.el-col video {
  width: 100%;
  object-fit: contain;
  height: 100%;
}

.content {
  width: 100%;
  height: 300px;
  line-height: 300px;
  overflow: hidden;
  cursor: pointer;
}

.content img {
  vertical-align: middle;
}

.product-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%; /* 或者具体宽度，确保它适合你的布局 */
  text-overflow: ellipsis;
  line-height: 1.2em; /* 调整为你的行高 */
  height: 2.4em; /* 基于行高的两倍，因为我们显示两行 */
  color: #464646;
  font-size: 15px;
}

.author{
  font-size: 12px;
  color: #999;
  float:right;
}
</style>
